<template>
  <view class="inner-wrapper">
    <image class="background-top" src="/authorize/img/bg.png" />
    <view class="realname-wrapper">
      <view v-if="verified" class="realname-block">
        <view class="realname-block-title">
          已实名认证
        </view>
        <view class="realname-block-text">
          <view>{{ name }}</view>
          <view>{{ idCard }}</view>
        </view>
      </view>
      <template v-else>
        <view class="realname-block">
          <view class="realname-block-title">
            实名认证·须知
          </view>
          <view class="realname-block-text">
            《中华人民共和国电子签名法》规定只有锁定签署主体真实身份，才能确保每次签署是您的真实行为和真实意愿表达
          </view>
        </view>
        <view class="realname-block">
          <view class="realname-block-input-wrapper border">
            <view class="realname-block-input-label">真实姓名</view>
            <input
              :value="name"
              type="text"
              disabled
              class="realname-block-input"
              placeholder="请输入"
            >
          </view>
          <view class="realname-block-input-wrapper">
            <view class="realname-block-input-label">身份证号</view>
            <input
              v-model="idCard"
              type="text"
              class="realname-block-input"
              placeholder="请输入"
            >
          </view>
        </view>
        <view v-if="show" class="realname-block">
          <view class="realname-block-input-wrapper column">
            <view class="realname-block-input-label">上传身份证照片</view>
            <view class="realname-block-upload-wrapper">
              <view class="realname-block-upload" @tap="upload('positive')">
                <view class="realname-block-upload-image-box">
                  <image
                    class="realname-block-upload-image"
                    :src="positiveSrc"
                    mode="aspectFit"
                  />
                </view>
                <view class="realname-block-upload-tip">添加身份证正面</view>
              </view>
              <view class="realname-block-upload" @tap="upload('reverse')">
                <view class="realname-block-upload-image-box">
                  <image
                    class="realname-block-upload-image"
                    :src="reverseSrc"
                    mode="aspectFit"
                  />
                </view>
                <view class="realname-block-upload-tip">添加身份证背面</view>
              </view>
            </view>
          </view>
        </view>
        <button class="realname-submit" @tap="submit">立即认证</button>
      </template>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
import { uploadSiteImg } from "@/services/common";
import { realnameVerifyReq } from "@/services/auth";
export default {
  components: {},
  props: {},
  data() {
    return {
      positiveSrc: "/authorize/img/shenfenzhengzheng.png",
      reverseSrc: "/authorize/img/shenfenzhengbei.png",
      idCard: "",
      positiveUrl: "",
      reverseUrl: "",
      verified: false,
      loading: false,
      show: false
    };
  },
  computed: {
    ...mapState(["site"]),
    name() {
      return this.site.employeeName;
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.show = !!this.site.employeeId;
    this.idCard = this.site.idCard;
    this.verified = this.site.verified;
    if (this.verified) {
      this.idCard = this.site.idCard
        ? this.site.idCard.slice(0, 4) + "******" + this.site.idCard.slice(-4)
        : "";
    }
  },
  methods: {
    upload(type) {
      uni.chooseImage({
        count: 1,
        success: imageRes => {
          uni.showLoading({
            title: "上传中..."
          });
          const tempFilePaths = imageRes.tempFilePaths;
          this[`${type}Src`] = tempFilePaths[0];
          uploadSiteImg(tempFilePaths[0])
            .then(res => {
              uni.hideLoading();
              this[`${type}Url`] = res[0];
            })
            .catch(err => {
              uni.hideLoading();
              uni.showToast({
                title: err.message,
                icon: "none",
                duration: 2000
              });
            });
        },
        fail: err => {
          uni.hideLoading();
          uni.showToast({
            title: err.message,
            icon: "none",
            duration: 2000
          });
        }
      });
    },
    submit() {
      if (this.loading) {
        return false;
      }
      this.loading = true;
      uni.showLoading({
        title: "认证中..."
      });
      realnameVerifyReq({
        empInfoId: this.site.employeeId,
        name: this.name,
        idCard: this.idCard,
        positiveUrl: this.positiveUrl,
        reverseUrl: this.reverseUrl
      })
        .then(res => {
          uni.setStorageSync("verified", true);
          this.$store.commit("site/updateCompanyInfo");
          uni.showToast({
            title: "实名认证成功",
            icon: "none",
            duration: 2000
          });
          const timer = setTimeout(() => {
            uni.redirectTo({
              url: "/pages/index/index"
            });
            this.loading = false;
            uni.hideLoading();
            clearTimeout(timer);
          }, 2000);
        })
        .catch(err => {
          uni.hideLoading();
          console.log("debug log --> ", err);
          const timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 2000);
        });
    }
  }
};
</script>
<style lang="scss">
.background-top {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 190px;
}
</style>
